<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      :title="storeInfo.name"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path)"
    >
      <van-button round type="danger" slot="right" size="small" @click="submit">发布</van-button>
    </van-nav-bar>
    <div class="has-top"></div>

    <!-- 写点评 -->
    <div class="pd-30 bg-white">
      <div class="flex flex-v-c">
        <span class="fs-32">总体</span>
        <van-rate
          class="mlr-20"
          v-model="model.rateValue.value"
          color="#ff435b"
          void-icon="star"
          void-color="#dcdcdc"
          size="0.6rem"
        />
      </div>
      <textarea class="comment" v-model="model.comment.value" placeholder="亲，请分享口味、环境、服务、食材等方面的体验！"></textarea>
      <p class="mtb-10 fs-24 color-gray-light tar">请写15个字以上点评哦！</p>
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="5"
        :after-read="afterRead"
        @delete="(file,detail)=>{afterDelete(file,detail)}"
        upload-text="上传图片"
      />
      <p class="fs-24 color-gray-light">
        <span>100字+3张图有机会赢取</span>
        <span class="color-warning">100积分</span>
      </p>
    </div>

    <!-- 推荐菜 -->
    <!-- <div class="mt-20 bg-white">
      <van-cell>
        <template slot="title">
          <span class="fs-34 fw-700">推荐菜</span>
        </template>
      </van-cell>
      <ul class="ptb-10 plr-30 flex flex-wrap">
        <li class="recommend-item fs-24">牛舌</li>
        <li class="recommend-item fs-24">猪五花</li>
        <li class="recommend-item fs-24">西冷牛排</li>
        <li class="recommend-item fs-24">猪颈肉</li>
        <li class="recommend-item fs-24">猪大肠</li>
        <li class="recommend-item fs-24">羊排</li>
        <li class="recommend-item fs-24">一口肠</li>
        <li class="recommend-item fs-24">牛舌</li>
        <li class="recommend-item fs-24">猪五花</li>
        <li class="recommend-item fs-24">西冷牛排</li>
        <li class="recommend-item fs-24">猪颈肉</li>
        <li class="recommend-item fs-24">猪大肠</li>
        <li class="recommend-item fs-24">羊排</li>
        <li class="recommend-item fs-24">一口肠</li>
      </ul>
    </div>-->

    <!-- 匿名点评 -->
    <!-- <div class="mt-20">
      <van-cell>
        <template slot="title">
          <span class="fs-34 fw-700">匿名点评</span>
        </template>
        <van-checkbox v-model="anonymous" checked-color="#ff435b" slot="right-icon"></van-checkbox>
      </van-cell>
    </div>-->
  </div>
</template>

<script>
import { Toast } from 'vant'
import { upLoad } from 'api/upload'
import { add } from 'api/memberComment'

export default {
  data() {
    return {
      storeInfo: {},
      model: {
        rateValue: {
          value: 1
        },
        comment: {
          value: '',
          minLength: 15,
          minLengthMessage: '请至少输入15个字点评哦'
        },
        images: {
          value: []
        }
      },
      fileList: [],
      anonymous: false
    }
  },
  methods: {
    // 上传文件的回调
    afterRead(file) {
      if (file.length) {
        for (let i = 0, len = file.length; i < len; i++) {
          upLoad({
            Content: this.$utils.getCaption(file[i].content, 'base64,'),
            FileType: this.$utils.getCaption(file[i].file.type, '/')
          }).then(res => {
            //console.log(res);
            if (res) {
              this.model.images.value.push(res.Data.Path)
            }
          })
        }
      } else {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          //console.log(res);
          if (res) {
            this.model.images.value.push(res.Data.Path)
          }
        })
      }
    },
    afterDelete(file, detail) {
      this.model.images.value.splice(detail.index, 1)
    },
    // 提交
    submit() {
      let self = this
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {
        // 验证通过
        add(self.model, parseInt(self.storeInfo.id)).then(res => {
          //console.log(res);
          if (res) {
            this.$toast({
              type: 'success',
              message: '提交评论成功，审核通过即可成为精选点评！',
              forbidClick: true,
              onClose: function() {
                self.$router.back()
              }
            })
          }
        })
      } else {
        Toast(self.$utils.formValidate(self.model).msg)
      }
    }
  },
  created() {
    this.storeInfo = this.$route.query
  }
}
</script>

<style lang="scss" scoped>
.comment {
  width: 100%;
  height: 300px;
  padding: 10px 0;
  border: 0;
}
.recommend-item {
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 5px 20px;
  background: #f5f5f5;
  border-radius: 30px;
}
/deep/ .van-checkbox__icon .van-icon {
  border: 2px solid #999;
}
</style>


